<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
    <@header title="代码预览"  libs=["code"]/>
    <div class="wrapper">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <#list gen_code as cdoeKey>
                    <#if cdoeKey_index == 0>
                        <li class="active"><a href="#tab_1_${cdoeKey.id}" data-toggle="tab">${cdoeKey.name}</a></li>
                    <#else>
                        <li><a  href="#tab_1_${cdoeKey.id}" data-toggle="tab">${cdoeKey.name}</a></li>
                    </#if>
                </#list>
            </ul>
            <div class="tab-content">
                <#list gen_code as cdoeKey>
                    <#if cdoeKey_index == 0>
                        <div class="tab-pane active" id="tab_1_${cdoeKey.id}">
                             <pre  id="code_${cdoeKey.id}" class="editor">${cdoeKey.templateValue?html}</pre>
                            <script>
                                $(function() {
                                    var lang = '${cdoeKey.suffix}';
                                    if (lang == 'html'){ lang = 'ftl'; }
                                    $('#code_${cdoeKey.id}').aceEditor({
                                        id: 'code_${cdoeKey.id}',
                                        readOnly: true,
                                        height: $(window).height() -$('.nav-tabs').outerHeight() -60,
                                        lang: lang,
                                        fontSize: 14,
                                        top: 0
                                    })
                                })
                            </script>
                        </div>
                    <#else>
                        <div class="tab-pane" id="tab_1_${cdoeKey.id}">
                             <pre  id="code_${cdoeKey.id}" class="editor">${cdoeKey.templateValue?html}</pre>
                            <script>
                                $(function() {
                                    var lang = '${cdoeKey.suffix}';
                                    if (lang == 'html'){ lang = 'ftl'; }
                                    $('#code_${cdoeKey.id}').aceEditor({
                                        id: 'code_${cdoeKey.id}',
                                        readOnly: true,
                                        height: $(window).height() -$('.nav-tabs').outerHeight() -60,
                                        lang: lang,
                                        fontSize: 14,
                                        top: 0
                                    })
                                })
                            </script>
                        </div>
                    </#if>
                </#list>
            </div>
        </div>
    </div>
    <@footer>
        <script type="text/javascript">

            function onLoadSuccess() {
                opt.modal.msg("数据正在渲染,请稍后...");
            }

            $(window).resize(function(){
                var tabHeight = $('.nav-tabs').outerHeight();
                $('.editor').height($(window).height() - tabHeight);
            }).resize();
        </script>
    </@footer>
</@pageTheme>